<template>
  <div>
    <GeneralForm ref="filterForm" v-bind="params">
      <el-button type="primary" size="medium" @click="searchData">搜索</el-button>
      <el-button type="info" size="medium" @click="clearData">清空</el-button>
    </GeneralForm>
  </div>
</template>

<script>
import {formDataTransform} from '@/utils/GeneralTable'

export default {
  name: "GeneralFilter",
  components: {
    GeneralForm: () => import('../FormComponent/GeneralForm')
  },
  props: {
    // 表单配置数据
    formOption: {
      type: Object,
    }
  },
  data() {
    return {
      params: {}
    }
  },
  created() {
    // 转换数据格式
    this.formOption && (this.params = formDataTransform(this.formOption))
  },
  methods: {
    // 点击搜索按钮触发searchEvent事件
    searchData() {
      this.$emit('searchEvent',this.getData())
    },
    // 点击取消按钮触发clearEvent事件
    clearData() {
      this.$refs.filterForm.clearData()
      this.$nextTick(() => {this.$emit('clearEvent',this.$refs.filterForm.getFormData())})
    },
    // 获取表单数据
    getData() {
      let source = this.$refs.filterForm.getFormData()
      let target = {}
      for (let item in source) {
        source[item] === '' || (target[item] = source[item])
      }
      return target
    },
    addData (data) {
      this.$refs.filterForm.addFormData(data)
    },
  },
  watch: {
    formOption: {
      handler: function (val) {
        this.formOption && (this.params = formDataTransform(this.formOption))
      },
      deep: true
    }
  }
}
</script>

<style scoped>

</style>
